<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>购买积分</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        body{background-color: #eeedf3;}
        .title{padding: 8px 15px;font-size: 12px;}
        ul{padding: 0 15px;background-color: #fff;}
        ul li{position: relative;display: -webkit-box;display: box;height: 50px;line-height: 50px;
            font-size: 18px;}
        ul li label{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        ul li .left{width: 30px;}
        input{-webkit-appearance: none;width: 20px;height: 20px;border: 1px solid #ffc10c;
            border-radius: 50%;position: relative;margin-top: 15px;}
        input:before{content: '';width: 12px;height: 12px;border-radius: 12px;position: absolute;
            left: 3px;top: 3px;background-color: #fff;}
        input:checked:before{background-color: #ffc10c;}
        ul li .center{box-flex: 1;-webkit-box-flex: 1;color: #A4A4A4;}
        ul li div .iconfont{font-size: 22px;margin-right: 5px;}
        ul li .right{box-flex: 1;-webkit-box-flex: 1;color: #f69802;}

        .online{padding: 0 15px;display: -webkit-box;height: 50px;display: box;background-color: #fff;margin-top: 15px;overflow: hidden;line-height: 50px;position: relative;}
        .online label{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        .online div{width: 30px;}
        .online div span{display: block;color: #333;}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;}
        .footer-fixed button{display: block;border: none;outline: none;width: 100%;-webkit-appearance: none;color: #fff;font-size: 18px;text-align: center;background-color: #ffc10c;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">购买积分</div>
        </div>
    </header>
    <div class="content">
        <p class="title">用e币兑换</p>
        <ul>
            <li class="bottom-line">
                <label for="a"></label>
                <div class="left">
                    <input id="a" type="radio" name="pay"/>
                </div>
                <div class="center"><i class="iconfont icon-renminbi1"></i>1</div>
                <div class="right"><i class="iconfont icon-jifen"></i>10分</div>
            </li>
            <li class="bottom-line">
                <label for="b"></label>
                <div class="left">
                    <input id="b" type="radio" name="pay"/>
                </div>
                <div class="center"><i class="iconfont icon-renminbi1"></i>10</div>
                <div class="right"><i class="iconfont icon-jifen"></i>100分</div>
            </li>
            <li class="bottom-line">
                <label for="c"></label>
                <div class="left">
                    <input id="c" type="radio" name="pay"/>
                </div>
                <div class="center"><i class="iconfont icon-renminbi1"></i>100</div>
                <div class="right"><i class="iconfont icon-jifen"></i>1000分</div>
            </li>
        </ul>
        <div class="online">
            <label for="d"></label>
            <div>
                <input id="d" type="checkbox"/>
            </div>
            <span>在线支付</span>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-fixed">
            <button>立即购买</button>
        </div>
    </footer>
</body>
</html>